
<template>
  <div>
    <router-view/>
      <!-- <base-tabs
        :currentTab="currentTab"
        :todos="todos"
        @toggleTab="toggleTab"
        @clearAllCompleted="clearAllCompleted"
      /> -->

      <app-tabs :currentTab="currentTab" @toggleTab="toggleTab">
          <app-tab-item :currentTab="tab.index" v-for="tab in tabs" :key="tab.index">
            <span slot="label">{{tab.index}}</span>
            <span slot="content">{{tab.content}}</span>
          </app-tab-item>
      </app-tabs>

      <input
        type="test"
        autofocus="autofocus"
        @keyup="addTodo"
        placeholder="输入Todo"
      />
      <todo-item
        :todo="todo"
        v-for="todo in filterTodos"
        :key="todo.id"
        @deleteTodo="deleteTodo"
      />
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'
import BaseTabs from '../components/BaseTabs.vue'

var id = 0
export default {
  name: "Todo",
  components: {
    TodoItem,
    BaseTabs
  },
  beforeRouteEnter (to, from, next) {
    console.log('todo component before enter')
    next(vm => {
      console.log('vm.id', vm.id)
    })
  },
  // 控制页面离开的行为
  beforeRouteLeave (to, from, next) {
    console.log('todo component leave enter')
    next()
  },
  data () {
    return {
      todos: [],
      // currentTab: 'all',
      currentTab: '1',
      tabs: [
        {
          index: "1",
          content: "tab1 content"
        },
        {
          index: "2",
          content: "tab2 content"
        },
        {
          index: "3",
          content: "tab3 content"
        }
      ]
    };
  },
  computed: {
    filterTodos(){
        if(this.filter === 'all'){
            return this.todos
        }
        const completed = this.currentTab === 'completed'
        return this.todos.filter(todo => completed === todo.completed)
    }
  },
  mounted() {
    console.log(this.$route)
  },
  methods: {
    addTodo(e) {
      this.todos.unshift({
        id: id++,
        content: e.target.value.trim(),
        completed: false
      })
      e.target.value = ''
    },
    deleteTodo(id) {
      this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
    },
    // toggleTab(tab) {
    //   this.currentTab = tab
    // },
    clearAllCompleted() {
        this.todos = this.todos.filter(todo => !todo.completed)
    },
    toggleTab(currentTab) {
      console.log('currentTab is ', currentTab)
      this.currentTab = currentTab
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
